<template>
    <div v-loading="$store.state.article.isLoading">
        <div v-for="article in data" :key="article.id" style="margin-bottom: 3.5rem">
            <div class="table">
                <div class="table-cell left-container">
                    <ImageContainer size="6" :src="article.avatar"/>
                </div>
                <div class="table-cell right-container">
                    <el-link type="primary" class="content" @click="$router.push({name: 'ArticleMain', params: {id: article.id}})">{{article.title}}</el-link>
                    <div class="little-container">
                        <span class="little-content">
                            0 个回复 • 0 次浏览 • {{article.gmtCreated}}
                        </span>
                        <span class="tag" v-for="tag in article.tags">
                            <el-tag size="mini" >{{tag.name}}</el-tag>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import ImageContainer from "../Image/ImageContainer";
    import {http} from "../../api/axios";
    export default {
        name: "Article",
        props:{
            data: {
                type: Array,
                default: () => [
                    {
                        id: "1322432874007265281",
                        avatar: http + "/1297431908182962177/avatar/1598166866965616601704703000.png",
                        title: "测试",
                        gmtCreated: "2020-10-31 14:59",
                        tags: [
                            {
                                id:"1297433487225221123",
                                name:"SpringBoot",
                            }
                        ]
                    },
                ]
            }
        },
        components: {ImageContainer}
    }
</script>

<style scoped>
    /deep/.el-link.is-underline:hover::after{
        content: none;
    }
    /deep/.el-link.is-underline:hover{
        text-decoration: underline;
    }
    .content{
        font-size: 2.5rem;
        line-height: 4rem;
    }
    .little-container{
        margin-top: 1.5rem;
    }
    .little-content{
        font-size: 1.5rem;
        color: #909399;
        margin-right: 2rem;
    }
    .table{
        display: table;
        border-spacing: 2rem 1rem;
    }
    .table-cell{
        display: table-cell;
    }
    .left-container{
        vertical-align: top;
    }
    .tag{
        margin-right: 0.5rem;
        line-height: 4rem;
    }
</style>